<template>
  <div style="margin:auto">
    <el-tree style="max-width: 600px" :data="MenuPermissionsData" :props="defaultProps" @node-click="handleNodeClick"/>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getMenuPermissionsList()
})

interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const form: any = reactive({
  
})

const MenuPermissionsData:any=ref([])

const getMenuPermissionsList =()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/Menu/MenuTreeShowByRoleId').then(res=>{
    //console.log(res);
    MenuPermissionsData.value = res.data.data;
  }).catch(err=>{
    console.log(err);
    
  })    
}

</script>

<style scoped>

</style>